<template>
  <div class="power-box">
    <el-container>
      <el-header class="power-header">
        <el-button type="primary" size="mini">创建角色</el-button>
      </el-header>

      <el-main>
        <el-table :data="tableData" stripe style="width: 100%" border>
          <el-table-column prop="name" label="角色名称" width="180">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="180">
          </el-table-column>
          <el-table-column prop="auth_name" label="授权人"> </el-table-column>
          <el-table-column prop="auth_time" label="授权时间"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button size="small" @click="handleOpenSel(scope.$index)">
                设置权限
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-footer
          ><el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="1"
            :page-size="5"
            @current-change="handleCurrentChange"
          >
          </el-pagination
        ></el-footer>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import ceshi from "./viewsSmallChild/ceshi";
import {mapActions} from "vuex"
export default {
  data() {
    return {
      total: 30,
      tableData: {},
      req: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  methods: {
    ...mapActions(["getInitPower"]),
    handleCurrentChange(index) {
      this.req.pageNum = index;
      this.getInitPower(this.req).then((a) => {
        this.tableData = a.data.data.list;
        this.total = a.data.data.total;
      });
    },
    handleOpenSel(index) {
      console.log("在这里"+index);
      const h = this.$createElement;
      this.$msgbox({
        title: "设置权限",
        message: h("div", null, [
          // h('span', null, '内容可以是 '),
          h(ceshi, null, []),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "info",
          message: "action: " + action,
        });
      });
    },
  },

  // 初始化数据
  mounted() {
    this.getInitPower(this.req).then((a) => {
      console.log(a)
      this.tableData = a.data.data.list;
      this.total = a.data.data.total;
    });
  },
};
</script>


<style lang="scss" scoped>
.power-header {
  align-items: center;
}
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>